import { useCommonStore, useUserStore } from '@/store'
import { View, Image } from '@tarojs/components'
import Taro from '@tarojs/taro'
import { useState } from 'react';
import { AtAvatar, AtButton, AtFloatLayout, AtIcon, AtList, AtListItem } from 'taro-ui'

export default function Personal() {
    const userStore = useUserStore();
    const commonStore = useCommonStore();

    const [aboutUs, setAboutUs] = useState<boolean>(false);

    const handleLogin = () => Taro.navigateTo({ url: `/pages/user/index` })

    const handleShowUserInfo = () => Taro.navigateTo({ url: "/pages/show-userinfo/index" })

    const jumpToOrder = () => { 
        commonStore.setSelectedIndex(0);
        Taro.switchTab({ url: "/pages/employee/order/index" });
    }

    const handleCloseAboutUs = () => setAboutUs(false)

    return (
        <View className='personal h-screen bg-gray-100'>
            <View className='w-full h-1/5 bg-gradient-to-r from-blue-300 to-purple-400 flex items-center px-4 gap-x-3'>
                <View onClick={handleShowUserInfo}>
                    <AtAvatar circle image={userStore.avatar} />
                </View>
                <View className='text-xs text-white' onTap={handleLogin}>
                    {!userStore.username ?
                        <>
                            请点击登陆
                            <AtIcon value='chevron-right' size='14' color='#fff' />
                        </>
                        :
                        <>
                            {userStore.username}
                        </>
                    }
                </View>
            </View>
            <View className='mt-3'>

                <AtList>
                    <AtListItem
                        title='订单'
                        arrow='right'
                        thumb='https://img12.360buyimg.com/jdphoto/s72x72_jfs/t6160/14/2008729947/2754/7d512a86/595c3aeeNa89ddf71.png'
                        onClick={jumpToOrder}
                    />
                    <AtListItem
                        title='联系客服'
                        arrow='right'
                        extraText='10086'
                        thumb='http://img10.360buyimg.com/jdphoto/s72x72_jfs/t5872/209/5240187906/2872/8fa98cd/595c3b2aN4155b931.png'
                        onClick={() => Taro.makePhoneCall({ phoneNumber: '10086' })}
                    />
                    <AtListItem
                        title='关于我们'
                        arrow='right'
                        thumb='http://img12.360buyimg.com/jdphoto/s72x72_jfs/t10660/330/203667368/1672/801735d7/59c85643N31e68303.png'
                        onClick={() => setAboutUs(true)}
                    />
                </AtList>

                {
                    userStore.token ?
                        <AtButton className='mt-3 bg-red-400 text-white font-bold' onClick={() => {
                            userStore.logout();
                            commonStore.setSelectedIndex(0);
                        }}>退出登陆</AtButton>
                        :
                        <></>
                }
            </View>

            <AtFloatLayout isOpened={aboutUs} title='关于我们' onClose={handleCloseAboutUs} className='overflow-y-auto'>
                <View className='text-sm font-semibold'>
                    我们是一支专业的家政团队，公司内有严格的员工制度，为每一位客户服务是我们的荣幸
                </View>
                <View className='flex flex-col items-center'>
                    <Image src='https://img0.baidu.com/it/u=2555468105,2229295420&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=986' />
                </View>
            </AtFloatLayout>
        </View>
    )
}
